<template>
  <div class="box">
    <div class="top">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#e3e4e5" text-color="#ababab" active-text-color="#f30213" style="height:30px">
        <el-menu-item index="1">京东首页</el-menu-item>
        <el-sub-menu index="6">
          <template #title>山东</template>
          <el-menu-item index="6-1" style="color:black;">深圳</el-menu-item>
          <el-menu-item index="6-2" style="color:black;">上海</el-menu-item>
          <el-menu-item index="6-3" style="color:black;">浙江</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5" style="margin-left:150px;">我的订单</el-menu-item>
        <el-sub-menu index="2">
          <template #title>我的京东</template>
          <el-menu-item index="2-1" style="color:black;">待处理订单</el-menu-item>
          <el-menu-item index="2-2" style="color:black;">我的问答</el-menu-item>
          <el-menu-item index="2-3" style="color:black;">返修退换货</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>企业采购</template>
          <el-menu-item index="7-1" style="color:black;">企业购</el-menu-item>
          <el-menu-item index="7-2" style="color:black;">工业品</el-menu-item>
          <el-menu-item index="7-3" style="color:black;">礼品卡</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>客户服务</template>
          <el-menu-item index="8-1" style="color:black;">帮助中心</el-menu-item>
          <el-menu-item index="8-2" style="color:black;">售后服务</el-menu-item>
          <el-menu-item index="8-3" style="color:black;">在线客服</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>网站导航</template>
          <el-menu-item index="9-1" style="color:black;">特色主题</el-menu-item>
          <el-menu-item index="9-2" style="color:black;">行业频道</el-menu-item>
          <el-menu-item index="9-3" style="color:black;">生活服务</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>手机京东</template>
          <el-menu-item index="3-1" style="color:black;">手机京东</el-menu-item>
          <el-menu-item index="3-2" style="color:black;">关注京东微信</el-menu-item>
          <el-menu-item index="3-3" style="color:black;">京东金融客户端</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="4">网站无障碍</el-menu-item>
      </el-menu>
    </div>
    <div class="middle">
      <div class="m-left">
        <img src="../assets/1.png" alt="">
      </div>
      <div class="m-right">
        <input type="text">
        <button class="s-btn">搜索</button>
      </div>
    </div>
    <div class="bottom">
      <div class="b-left">全部商品</div>
      <div class="b-right">
        <div class="b-f">配送至：</div>
        <div class="m-4">
          <el-cascader v-model="value" :options="options" @change="handleChange" />
        </div>
      </div>
    </div>
    <div class="column">
      <el-table :data="cartList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="150" />
        <el-table-column prop="name" label="商品" width="200" />
        <el-table-column prop="specification" label="规格" width="120" />
        <el-table-column prop="price" label="单价" width="120" />
        <el-table-column prop="num" label="数量" width="120" />
        <el-table-column prop="sum" label="小计" width="120" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button link type="danger" plain size="small" @click="handleClick">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    {{ t('title') }}
    {{ t('name') }}
    <el-button @click="en">英文</el-button>
    <el-button @click="zh">中文</el-button>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n();
function en() {
  locale.value = 'en'
}
function zh() {
  locale.value = "zh-cn"
}

import { ref, reactive } from 'vue'

const handleClick = () => {
  console.log('click')
}

const cartList = reactive([
  { id: 1, name: 'xxx', specification: ['big', "small"], price: 200, num: 1, sum: 200 }
])
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const value = ref([])
const handleChange = (value) => {
  console.log(value)
}

const options = [
  {
    value: 'sahndong',
    label: '山东省',
    children: [
      {
        value: 'heze',
        label: '菏泽市',
        children: [
          {
            value: 'caoxian',
            label: '曹县',
          },
          {
            value: 'shanxian',
            label: '单县',
          },
          {
            value: 'chengwu',
            label: '成武县',
          },
          {
            value: 'yuncheng',
            label: '郓城县',
          },
        ],
      },
      {
        value: 'taian',
        label: '泰安市',
        children: [
          {
            value: 'daiyue',
            label: '岱岳区',
          },
          {
            value: 'taishan',
            label: '泰山区',
          },
        ],
      },
    ],
  },
  {
    value: 'sichuan',
    label: '四川',
    children: [
      {
        value: 'chengdu',
        label: '成都市',
        children: [
          {
            value: 'chenghua',
            label: '成华区',
          },
          {
            value: 'gaoxin',
            label: '高新区',
          },
          {
            value: 'jinjiang',
            label: '锦江区',
          },
          {
            value: 'pujiang',
            label: '蒲江区',
          },
          {
            value: 'shuangliu',
            label: '双流区',
          },
        ],
      },
      {
        value: 'liangshan',
        label: '凉山州',
        children: [
          {
            value: 'huili',
            label: '会理县',
          },
          {
            value: 'yanyuan',
            label: '盐源县',
          },
          {
            value: 'xide',
            label: '喜德县',
          }
        ],
      },
      {
        value: 'mianyang',
        label: '绵阳市',
        children: [
          {
            value: 'pingwu',
            label: '平武县',
          },
          {
            value: 'santai',
            label: '三台县',
          },
          {
            value: 'anzhou',
            label: '安州区',
          },
          {
            value: 'youxian',
            label: '游仙区',
          }
        ],
      },
      {
        value: 'nanchong',
        label: '南充市',
        children: [
          {
            value: 'jialing',
            label: '嘉陵区',
          },
          {
            value: 'langzhong',
            label: '阆中市',
          },
          {
            value: 'xichong',
            label: '西充县',
          },
          {
            value: 'nanbu',
            label: '南部县',
          }
        ],
      },
    ],
  },
  {
    value: 'jilin',
    label: '吉林',
    children: [
      {
        value: 'changchun',
        label: '长春市',
        children: [
          {
            value: 'chaoyang',
            label: '朝阳区',
          },
          {
            value: 'gongzhu',
            label: '公主岭市',
          },
          {
            value: 'dehui',
            label: '德惠市',
          },
          {
            value: 'nongan',
            label: '农安县',
          }
        ],
      },
      {
        value: 'tonghua',
        label: '通化市',
        children: [
          {
            value: 'dongchang',
            label: '东昌区',
          },
          {
            value: 'huinan',
            label: '辉南县',
          },
          {
            value: 'jian',
            label: '集安市',
          },
          {
            value: 'liuhe',
            label: '柳河县',
          }
        ],
      },
      {
        value: 'baishan',
        label: '白山市',
        children: [
          {
            value: 'jiangyuan1',
            label: '江源区',
          },
          {
            value: 'jingyu',
            label: '靖宇县',
          },
          {
            value: 'linjiang',
            label: '临江市',
          },
          {
            value: 'hunjiang',
            label: '浑江区',
          }
        ],
      },
    ],
  },
]
</script>
<style lang="scss" scoped>
.box {
  width: 90%;
  margin: 0 auto;

  .top {
    height: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;

    .m-left {
      img {
        width: 200px;
      }
    }

    .m-right {
      display: flex;
      align-items: center;

      input {
        border: 2px solid #c91623;
        width: 200px;
        height: 30px;
      }

      .s-btn {
        border: none;
        background-color: #c91623;
        color: #fff;
        width: 50px;
        height: 30px;
        font-weight: bold;
        margin-left: -5px;
      }

    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;

    .b-left {
      font-weight: bold;
      color: red;
      font-size: 20px;
      margin-left: 30px;
    }

    .b-right {
      display: flex;
      width: 300px;
      align-items: center;

      .b-f {
        width: 80px;
      }
    }
  }

  .column {
    margin-left: 100px;
  }
}
</style>